<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='/home/home-content/home-content-root-1.css'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <!-- 整体+头部 -->
    <link rel="stylesheet" href="/home/home.css">

    <!-- 搜索框 -->
    <link rel="stylesheet" href="/common/searchBar/searchBar.css">

    <!-- 内容 -->
    <link rel="stylesheet" href="/home/content/content.css">

    <!-- 侧边栏 -->
    <link rel="stylesheet" href="/home/sideBar/sideBar.css">

    <!-- 左侧内容部分 -->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
    <link rel="stylesheet" href="/home/home-content/home-content.css">
</head>

<body>
    <div class="book-store">
<!--        欢迎您-->
<!--        <div th:text="${session.user_login.username}"></div>-->
        <!-- home -->
        <div class="header">
            <a href="/user/home" style="text-decoration: none;">
                <div class="header-title"><strong>图书管理系统</strong></div>
            </a>

            <!-- searchBar.html -->
            <div class="search_wrap">
                <div class="search">
                    <input type="text" class="searchTerm" placeholder="Search">
                    <svg class="searchButton" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M928.263354 1024a49.87349 49.87349 0 0 1-37.405117-16.956987l-192.511671-217.94715A425.420868 425.420868 0 0 1 53.981077 510.303055 427.415808 427.415808 0 0 1 482.394355 0.097253a430.408217 430.408217 0 0 1 416.44364 394.499305 425.919603 425.919603 0 0 1-25.934215 183.035708 49.87349 49.87349 0 0 1-93.263426-35.410178 327.668828 327.668828 0 0 0-299.240939-442.377855 322.182744 322.182744 0 0 0-257.347207 116.205231 327.668828 327.668828 0 0 0 423.924663 488.760201 99.74698 99.74698 0 0 1 125.681195 18.453191l192.511671 217.947151a49.87349 49.87349 0 0 1-37.405118 82.789993z" fill="#000000" p-id="2406"></path></svg>
                    </input>
                </div>
            </div>
            <!-- searchBar -->

            <a href="/book/addBook"><button class="button-swing">登记新书</button></a>

            <div class="profile">
                <div class="user-profile">
                    <a href="/user/home">
                        <img src="https://img1.baidu.com/it/u=4162775413,1511359484&fm=26&fmt=auto" alt="小新" class="user-img">
                    </a>
                </div>

                <!-- sideBar.html -->
                <div class="m-dropdown">
                    <div class="e-button open">
                        目录
                        <div class="e-burger">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <ul class="e-list">
                        <li><a href="/user/login">登录</a></li>
                        <li><a href="/book/bookManage">图书管理</a></li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- content.html -->
        <div id="main_container">


            <!-- home-content -->
            <div id="content_container">
                <div class="row">

                </div>
            </div>
        </div>
    </div>

</body>



<!-- 整体+头部 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="/home/home.js"></script>

<!-- 侧边栏 -->
<script src="/home/sideBar/sideBar.js"></script>

<!-- 左侧内容部分 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js'></script>
<script src="/home/home-content/home-content.js"></script>
<script src="/home/card-content/card-content.js"></script>
<script type="text/javascript" th:inline="javascript">

    var library = [[${booksInfo}]];
    var books = []
    for(let i = 0;i < [[${booksInfo.size()}]]; i++){
        const book_name = library[i][0];
        const book_press = library[i][1];
        const book_author = library[i][2];
        const book_date = library[i][3];
        const book_number = library[i][4];
        const book_image = 'http://localhost:8080/img/' + library[i][5];

        books.push({
            name: book_name,
            press: book_press,
            author: book_author,
            date: book_date,
            number: book_number,
            imgUrl: book_image,
        })
    }

    var x;
    for (x in books) {
        document.getElementsByClassName('row')[0].innerHTML +=
            '<div class="col s6 m3">' +
            '<div class="card hoverable principle">' +
            '<div class="card-image waves-effect waves-block waves-light">' +
            '<img class="activator" src=' + books[x].imgUrl + ' alt="Some image" />' +
            '</div>' +
            '<div class="card-content">' +
            '<span class="card-title activator grey-text text-darken-4">' + books[x].name + '</span>' +
            '</div>' +
            '<div class="card-reveal">' +
            '<span class="card-title grey-text text-darken-4">' + books[x].name + '</span>' +
            '<div class="card-title grey-text text-darken-4">' + '作者：' + books[x].author + '</div>' +
            '<div class="card-title grey-text text-darken-4">' + '出版社：' + books[x].press + '</div>' +
            '<div class="card-title grey-text text-darken-4">' + '出版日期：' + books[x].date + '</div>' +
            '<div class="card-title grey-text text-darken-4">' + '库存数量：' + books[x].number + '</div>' +
            '</div>' +
            '</div>' +
            '</div>'
    }
</script>



</html>